import React from 'react'
import { Typography, Button, Flex, Space } from 'antd'
import Provider, { Context, useMineContext } from './provider'

// hoc
interface Props {
  handleClick: (val: string) => void
}
const widhAddItem = (ChildComponent: React.ComponentType<Props>) => {
  return (props: any) => {
    const { setState } = useMineContext()
    const handleClick = (val: string) => {
      setState({
        title: val + Date.now()
      })
    }
    return <ChildComponent {...props} handleClick={handleClick} />
  }
}
const HocButton: React.FC<React.PropsWithChildren<Props>> = (props) => {
  return <Button onClick={() => props.handleClick('hoc')}>HOC</Button>
}
const Hoc = widhAddItem(HocButton)

// hooks
const Hook = () => {
  const { setState } = useMineContext()
  const handleClick = () => {
    setState({
      title: 'useContext 标题 -' + Date.now()
    })
  }
  return (
    <Button onClick={handleClick} type="primary">
      hooks
    </Button>
  )
}
// consumer
const Consumer = () => {
  return (
    <Context.Consumer>
      {(store) => {
        return <Typography.Title>{store?.state.title}</Typography.Title>
      }}
    </Context.Consumer>
  )
}
const ContextElement: React.FC = () => {
  return (
    <Provider>
      <Flex vertical>
        <Consumer />
        <Space>
          <Hook />
          <Hoc />
        </Space>
      </Flex>
    </Provider>
  )
}
export default ContextElement
